import React, { useState, useEffect } from 'react'
import './index.less'
import { GetCarBrand, GetBaoJia, GetJiaDetail } from '../services/index'
import { useHistory } from 'umi'
import Car from '@/models/car'
const Main: React.FC = () => {

    const history = useHistory();
    const [getCar, setCar] = useState<any[]>([]);
    const [getData, setData] = useState<any[]>([]);
    const [getNei, setNei] = useState<number>()
    const [getJia, setJia] = useState<any[]>([]);

    console.log(Car);

    const dian = (item: any) => {
        // const a = document.querySelector('.youce')
        // const b=a.style.display
        // document.getElementById('fade').style.display = 'none'
        GetBaoJia({ MasterID: item.MasterID }).then(res => {
            // console.log(res.data)
            setData(res.data)
            // if(res.data[1].GroupList==null){
            //     alert('GroupList没有资源')
            // }
        })
    };

    const zhezhao = () => {
        // const a = document.querySelector('#you')
        // console.log(a)
        setNei(0)
    }

    const guanbi = () => {
        setNei(1)
    }

    const goDetail = (item: any) => {
        console.log(item.SerialID);
        GetJiaDetail({ SerialID: item.SerialID }).then(res => {
            console.log(res)
            setJia(res.data);
            history.push({
                pathname: '/detail',
                state: {
                    item
                }
            })
        })
    }

    // window.onload = function a() {
    //     // console.log(1,'qweqwe')
    //     let youce = document.querySelector('#you')
    //     // console.log(youce)
    //     if (youce !== null) {
    //         let maxW = document.body.clientWidth - youce.offsetWidth;
    //         let maxH = document.body.clientHeight - youce.offsetHeight;
    //         youce.addEventListener('touchstart', function (e) {
    //             let ele = e || window.event;
    //             let touch = ele.targetTouches[0];
    //             let OL = touch.clientX - youce.offsetLeft;
    //             let OT = touch.clientY - youce.offsetTop;
    //             document.addEventListener('touchmove',default)
    //         })
    //     }
    // }

    useEffect(() => {
        GetCarBrand().then(res => {
            setCar(res.data);
            console.log(res.data)
            const kong: any[] = []
            list.forEach((ite, inde) => {
                res.data.forEach((item: any, index: any) => {
                    if (ite == item.Spelling[0]) {
                        console.log(ite)
                        kong.push(item)
                    }
                })
            })
            // console.log(kong);
        })
    }, [])

    const list = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'W', 'X', 'Y', 'Z']



    return <div className='main'>
        {/* <a to='/detail'></a> */}
        <div className='youce' id={getNei === 0 ? 'you' : ''}>
            <button onClick={() => { guanbi() }}>
                关闭
            </button>
            <ul>
                {
                    getData.map((item, index) => {
                        return <li key={index} className='list'>
                            <p>
                                {item.GroupName}
                            </p>
                            <div className='nei'>
                                {
                                    item.GroupList.map((ite: any, inde: any) => {
                                        return <dl key={inde} onClick={() => { goDetail(ite) }}>
                                            <dt>
                                                <img src={ite.Picture} alt="" />
                                            </dt>
                                            <dd>
                                                <p>
                                                    {ite.AliasName}
                                                </p>
                                                <p>
                                                    {ite.DealerPrice}
                                                </p>
                                            </dd>
                                        </dl>
                                    })
                                }
                            </div>
                        </li>
                    })
                }
            </ul>
        </div>
        <div className='header'>
            {
                list.map((item, index) => {
                    return <div key={index}>
                        {item}
                    </div>
                })
            }
        </div>
        {
            getCar.map((item, index) => {
                return <div key={index} onClick={() => { zhezhao() }}>
                    <dl onClick={() => { dian(item) }}>
                        <dt>
                            <img src={item.CoverPhoto} alt="" />
                        </dt>
                        <dd>{item.Name}</dd>
                    </dl>
                </div>
            })
        }

        <div className='da'>
            {
                list.map((item, index) => {
                    return <div key={index}>
                        {item}
                    </div>
                })
            }
        </div>
    </div>
}

export default Main;